<template>
  <div class="px-[16px] pt-[16px] bg-[var(--base-color)] rounded-[8px] mt-[8px] pb-[16px]">
    <FormTitle title="报关单信息" />
    <el-descriptions :column="4">
      <el-descriptions-item label="预录入编号:">{{
        formData?.pre_no || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="海关编码:">{{
        formData?.hs_no || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="境内发货人:">{{
        formData?.domestic_consignors || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="出境关别:">{{
        formData?.exit_barrier || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="出口日期:">{{
        formData?.out_date || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="申报日期:">{{
        formData?.declare_date || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="备案号:">{{
        formData?.record_number || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="境外收货人:">{{
        formData?.offshore_consignee || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="运输方式:">{{
        formData?.transport_type || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="运输工具及航次号:"
        >{{ formData?.transport_name || "-" }}/{{
          formData?.transport_number || "-"
        }}</el-descriptions-item
      >
      <el-descriptions-item label="提运单号:">{{
        formData?.waybill_number || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="监管方式:">{{
        formData?.regulatory_approach_text || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="征免性质:">{{
        formData?.levy_nature || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="许可证号:">{{
        formData?.license_number || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="合同协议号:">{{
        formData?.contract_number || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="贸易国(地区):">{{
        formData?.departure_country || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="抵运国(地区):">{{
        formData?.destination_country || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="指运港:">{{
        formData?.shipping_port || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="包装种类:">{{
        formData?.package_type || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="件数:">{{
        formData?.total_item_counts || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="毛重(KG):">{{
        formData?.gross_weight_kg || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="净重(KG):">{{
        formData?.net_weight_kg || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="成交方式:">{{
        formData?.sale_mode || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="运费(CNY):">{{
        formData?.freight_fee_cny || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="保险(CNY):">{{
        formData?.premiums_fee_cny || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="杂费(CNY):">{{
        formData?.extras_fee_cny || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="离境口岸:">{{
        formData?.departure_gate || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="币种:">{{
        formData?.pre_currency || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="汇率:">{{
        formData?.pre_exchange_rate || "-"
      }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="jsx">
import FormTitle from "@/components/Form/FormTitle.vue";

const props = defineProps({
  data: { type: Object, default: () => {} },
});
const formData = ref({});
watch(
  () => props.data,
  (val) => {
    if (val) {
      formData.value = val;
    }
  }
);
</script>
<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  display: inline-block;
  width: 110px;
  text-align: right;
  color: var(--base-sub-text-color);
}
:deep(.el-descriptions__content) {
  color: var(--base-text-color);
}
</style>

